<template>
	<div class="login-wrap">
		<el-form class="login-container">
			<h1 class="title">用户登录</h1>
			<el-form-item label="">
				<el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="">
				<el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
			</el-form-item>
			<el-row style="text-align: center;margin-top:-10px">
				<el-link type="primary">忘记密码</el-link>
				<el-link type="primary" @click="gotoRegister()">用户注册</el-link>
			</el-row>
		</el-form>
	</div>
</template>
 
<script>
export default {
  name: 'Login',
  data () {
    return {
      username:"",
      password:""
    }
  },
  methods:{
	//注册页面
	gotoRegister() {
        this.$router.push('/Registered')
      },
	//登录
    doSubmit() {
		let data = {
		userName: this.username,
		password: this.password
		};

		// 设置请求头为 application/json
		let config = {
		headers: {
			'Content-Type': 'application/json'
		}
		};
		// 发送 POST 请求
		this.$axios.post('/user/login', JSON.stringify(data), config)
		.then(response => {
			// 处理成功响应
			if(response.data.success){
				this.$message({
					message:'用户登录成功',
					type: 'success'
				});
				this.saveToken(response.data.data.token,response.data.data.nickName)
				this.$router.push('/NavMenu')
			}else{
				this.$message.error(response.data.msg);
			}
		})
		.catch(error => {
			// 处理错误
			console.error("请求错误:", error);
		});
	},
	saveToken(token,nickName){
		localStorage.setItem('satoken', token);
		localStorage.setItem('nickName', nickName);
	}
  }
}
</script>
 
<style scoped>
	.login-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10%;
		background-image: url();
		/* background-color: #112346; */
		background-repeat: no-repeat;
		background-position: center right;
		background-size: 100%;
	}
 
	.login-container {
		border-radius: 10px;
		margin: 0px auto;
		width: 350px;
		padding: 30px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		text-align: left;
		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	}
 
	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}
</style>